<!--测试页面-->

<template>
<div style="background-color: black;height:100%;width:  100%">
  <h3>词霸</h3>
</div>

</template>

<script>

</script>

<style scoped>

* {
  margin: 0;
  padding: 0;
}
h3 {
  font-size: 330px;
  text-align: center;
  margin-top: 0;
  background-image: -webkit-linear-gradient(
    left,
    pink 10%,
    plum 15%,
    lightskyblue 20%,
    limegreen 30%,
    blue 50%,
    rebeccapurple 75%,
    mediumvioletred 90%,
    paleturquoise 100%);
  color: transparent;
  /*将背景裁剪成文字*/
  -webkit-background-clip: text;

  /*背景放大一倍，动画才有移动的空间*/
  background-size: 200% 100%;

  /*动画 规定4秒执行完 无限循环 匀速播放*/
  animation: a 4s infinite linear;
}
@keyframes a {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>
